<template>
	<page-wraper>
		<wd-notice-bar text="当前支付方式不支持微信小程序内打开" prefix="warn-bold" />

		<!-- 订单信息 -->
		<view class="info-card">
			<view class="card-title">订单信息</view>
			<view class="info-item">
				<text class="label">订单号：</text>
				<text class="value">{{ orderInfo.po_number }}</text>
			</view>
			<view class="info-item" v-if="orderInfo.wait_for_pay_amount > 0">
				<text class="label">支付费用</text>
				<text class="value primary">{{ orderInfo.wait_for_pay_amount }} {{ orderInfo.currency }}</text>
			</view>
		</view>
		
		<view class="center-view">
			<view class="tips">
				<wd-text text="请复制下方网址到默认浏览器中打开" size="18px"></wd-text>
			</view>
			<view class="url">
				<wd-input v-model="url"></wd-input>
			</view>
			
			<view style="margin-top: 15px;">
				<wd-button @click="copy" block>复制</wd-button>
			</view>
		</view>
	</page-wraper>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'

	const url = ref('')
	const orderInfo = ref<any>({
		shipper_address: {},
		address: {}
	})

	function copy() {
		uni.setClipboardData({
			data: url.value,
			success: function () {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
			}
		})
	}

	onLoad((query : any) => {
		url.value = `https://www.ytad-pep.com/pay/jump/${query.id}`

		loadOrderDetail(query.id);
	})

	const loadOrderDetail = async (orderId : string) => {
		try {
			const res = await uni.$http.get(`/user/order/get_order_info/${orderId}`);

			if (res.data.code == 0) {
				orderInfo.value = res.data.data;
			}
		} catch (error) {
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			})
		}
	}
</script>

<style lang="scss" scoped>
	:deep(.page-wraper) {
		background: #f6f6f6;
	}

	.center-view {
		text-align: center;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.center-view .tips {
		margin-top: 50rpx;
	}

	.center-view .url {
		margin-top: 50rpx;
	}

	.info-card {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		margin-left: 5rpx;
		margin-right: 5rpx;

		.card-title {
			font-weight: 500;
			margin-bottom: 24rpx;
			color: #333;
		}

		.info-item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 16rpx;

			.label {
				color: #666;
			}

			.value {
				color: #333;

				&.primary {
					color: #007AFF;
					font-weight: 500;
				}
			}
		}
	}
</style>